<template>
  <div class="box">
    <ul>
      <li @click="Home">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </li>
      <li @click="storeManagement">
        <i class="iconfont icon-dianpu"></i>
        <span>店铺管理</span>
      </li>
      <li @click="clBtn">
        <i class="iconfont icon-neirongzixun"></i>
        <span>内容管理</span>
      </li>
      <ul v-if="state.closeOpen">
        <li @click="dishes">菜品管理</li>
        <li @click="">添加菜品</li>
        <li @click="tospecial">特价菜管理</li>
        <li @click="">上架特价菜</li>
      </ul>
      <li @click="Business">
        <i class="iconfont icon-shouye"></i>
        <span>订单管理</span>
      </li>
      <li @click="Commit">
        <i class="iconfont icon-pinglun"></i>
        <span>评论管理</span>
      </li>
      <li @click="setting">
        <i class="iconfont icon-shezhi"></i>
        <span>设置</span>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
//导入路由
import { useRoute, useRouter } from "vue-router";
import { reactive } from "vue";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    //开关
    const state = reactive({
      closeOpen: false,
    });
    function Home() {
      router.push({
        name: "home",
      });
    }
    function setting() {
      router.push({
        name: "setting",
      });
    }

    function storeManagement() {
      router.push({
        name: "storeManagement",
      });
    }
    function Business() {
      router.push({
        name: "Business",
      });
    }
    function Commit() {
      router.push({
        name: "commit",
      });
    }
    // 全部菜品
    function dishes() {
      router.push({
        name: "dishes",
      });
    }
    // 特价菜
    function tospecial() {
      router.push({
        name: "special",
      });
    }
    //点击切换开关
    function clBtn() {
      state.closeOpen = !state.closeOpen;
    }
    return {
      Home,
      setting,
      state,
      clBtn,
      storeManagement,
      Business,
      Commit,
      dishes,
      tospecial,
    };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 200px;
  height: 100vh;
  font-weight: bold;
  font-size: 20px;
  position: fixed;
  left: 0;
  > ul {
    padding-top: 10px;
    width: 100%;
    height: 100vh;
    text-align: left;
    padding-left: 50px;
    background: #fff;
    > li {
      margin: 10px 0;
      padding: 5px 0;
      font-weight: 600;
      cursor: pointer;
      > i {
        margin-right: 10px;
      }
    }
    > ul {
      font-size: 16px;
      font-weight: 600;
      padding-left: 30px;
      > li {
        padding: 10px 0;
        cursor: pointer;
      }
    }
  }
}
</style>
